<template>
	<view class="mbti-firends position-absolute-full">
		<view class="mbti-firends-content flex-column-start-start" :style="{'background-image': `url(${bgUrl})`}">
			<view class="top-box" :style="{height:contentTop+'rpx',width:'100%'}">
			</view>
			<view class="firends-box">
				<scroll-view ref="scrollView" :scroll-y="true" class="scroll-content" :show-scrollbar="false"
					:scroll-with-animation="true">
					<view class="firends-list" v-for="(item,index) in firendList" :key="index">
						<view class="firend-item flex-row-start-center">
							<view class="firend-avatar">
								<image class="cover-img" style="border-radius: 50%;" :src="item.avatar"
									mode="aspectFill"></image>
							</view>
							<view class="firend-name flex-row-start-center">
								{{item.name}}
							</view>
							<view class="firend-control flex-row-start-center">
								<image class="control-icon" style="margin-right: 28rpx;"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fa71c28e680f42e1a19e2a4fe4cc4993.png"
									mode="aspectFill" @click="handleControlClick('edit',item)"></image>
								<image class="control-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9ca1a617e6e643289a599545a7fb1896.png"
									mode="aspectFill" @click="handleControlClick('delete',item)"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<mbtiPop ref="mbtiPop" @confirmValue="handleConfirmValue"></mbtiPop>
		<mbtiModal ref="mbtiModal" @confirm="handleDeleteConfirm"></mbtiModal>
	</view>
</template>

<script>
	import mbtiPop from "@/components/m-mbti/mbti-pop.vue"
	import mbtiModal from "@/components/m-mbti/modal.vue"
	export default {
		components: {
			mbtiPop,
			mbtiModal
		},
		data() {
			return {
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d394a848c52a40a0b7fc9baf22ba6a01.png",
				screenWidth: 375,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				contentTop: 300,
				firendList: [{
						id: 0,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/31edeb8d844a48f58c1d07805c445d58.png",
						name: "有心人"
					},
					{
						id: 1,
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/211b035f23c2479c85aeef294c3a4108.png",
						name: "夜行记夜行"
					},
				]
			}
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop

				this.contentTop = rpxTop + rpxHeight + 72

			} catch (error) {
				//TODO handle the exception
			}
		},
		methods: {
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleControlClick(type, item) {
				if (type == 'edit') {
					this.$refs.mbtiPop.open({
						data: [{
								label: "",
								value: "",
								type: "label-none",
								valueType: "text",
								isRequire: true,
								limit: 18
							},

						],
						title: `修改“${item.name}”的备注名`,
						code: item.id
					})
				} else if (type == 'delete') {
					this.$refs.mbtiModal.open({
						canCaleBtnName: "取消",
						confirmBtnName: "删除",
						title: `删除“${item.name}”？`,
						type: "control",
						code: item.id
					})


				}
			},
			handleConfirmValue(e) {
				let newData = e.data[0]
				// 模拟的，之后走接口修改后重新请求数据
				this.firendList.forEach((item, index) => {
					if (item.id == e.code) {
						item.name = newData.value
					}
				})
			},
			handleDeleteConfirm(e) {
				let {
					code
				} = e
				let findIndex = -1
				this.firendList.forEach((item, index) => {
					if (item.id == code) {
						findIndex = index
					}
				})
				this.firendList.splice(findIndex, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mbti-firends {
		position: absolute;
		z-index: 999;
		box-sizing: border-box;
		background-color: #ededed;

		.mbti-firends-content {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;

			.firends-box {
				flex: 1;
				width: 100%;
				overflow: hidden;
			}

			.firends-list {
				width: 100%;
				padding: 0rpx 48rpx;

				.firend-item {
					width: 100%;
					height: 148rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-bottom: 24rpx;

					.firend-avatar {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
						margin-left: 28rpx;
						margin-right: 24rpx;

					}

					.firend-name {
						flex: 1;
						height: 100%;
						font-weight: 400;
						font-size: 32rpx;
						color: #494949;
						line-height: 44rpx;
					}

					.firend-control {
						height: 100%;
						margin-right: 36rpx;

						.control-icon {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}
	}
</style>